<template>
  <div class="settings-page">
    <div class="page-header">
      <h1>设置</h1>
      <p>管理您的账户设置和偏好</p>
    </div>

    <a-row :gutter="24">
      <!-- 处理设置 -->
      <a-col :span="16">
        <a-card title="处理设置" class="settings-card">
          <a-form layout="vertical">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="默认处理模式">
                  <a-select v-model:value="settings.defaultMode" placeholder="选择默认模式">
                    <a-select-option value="auto">智能模式</a-select-option>
                    <a-select-option value="manual">手动模式</a-select-option>
                    <a-select-option value="batch">批量模式</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="默认输出质量">
                  <a-select v-model:value="settings.defaultQuality" placeholder="选择默认质量">
                    <a-select-option value="high">高质量</a-select-option>
                    <a-select-option value="medium">中等质量</a-select-option>
                    <a-select-option value="low">低质量</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            
            <a-form-item label="自动处理选项">
              <a-checkbox-group v-model:value="settings.autoOptions">
                <a-checkbox value="enhance">自动图像增强</a-checkbox>
                <a-checkbox value="sharpen">自动锐化处理</a-checkbox>
                <a-checkbox value="noise">自动降噪处理</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            
            <a-form-item>
              <a-button type="primary" @click="saveProcessingSettings">
                保存处理设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>

        <!-- 通知设置 -->
        <a-card title="通知设置" class="settings-card">
          <a-form layout="vertical">
            <a-form-item label="邮件通知">
              <a-checkbox-group v-model:value="settings.notifications">
                <a-checkbox value="email_complete">处理完成通知</a-checkbox>
                <a-checkbox value="email_failed">处理失败通知</a-checkbox>
                <a-checkbox value="email_news">产品更新通知</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
            
            <a-form-item>
              <a-button type="primary" @click="saveNotificationSettings">
                保存通知设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>

      <!-- 账户设置 -->
      <a-col :span="8">
        <a-card title="账户设置" class="settings-card">
          <div class="account-settings">
            <a-button type="primary" block @click="showChangePasswordModal">
              <LockOutlined />
              修改密码
            </a-button>
            
            <a-divider />
            
            <a-button type="default" block @click="showDeleteAccountModal">
              <DeleteOutlined />
              删除账户
            </a-button>
          </div>
        </a-card>

        <!-- 数据统计 -->
        <a-card title="数据统计" class="settings-card">
          <div class="data-stats">
            <div class="stat-item">
              <div class="stat-label">本月处理文件</div>
              <div class="stat-value">{{ stats.monthlyFiles }}</div>
            </div>
            
            <div class="stat-item">
              <div class="stat-label">剩余免费额度</div>
              <div class="stat-value">{{ stats.remainingQuota }}</div>
            </div>
            
            <div class="stat-item">
              <div class="stat-label">存储空间使用</div>
              <div class="stat-value">{{ stats.storageUsed }}</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 修改密码模态框 -->
    <a-modal
      v-model:open="passwordModalVisible"
      title="修改密码"
      @ok="changePassword"
      @cancel="passwordModalVisible = false"
    >
      <a-form
        :model="passwordForm"
        :rules="passwordRules"
        layout="vertical"
        ref="passwordFormRef"
      >
        <a-form-item label="当前密码" name="currentPassword">
          <a-input-password
            v-model:value="passwordForm.currentPassword"
            placeholder="请输入当前密码"
          />
        </a-form-item>
        
        <a-form-item label="新密码" name="newPassword">
          <a-input-password
            v-model:value="passwordForm.newPassword"
            placeholder="请输入新密码"
          />
        </a-form-item>
        
        <a-form-item label="确认新密码" name="confirmPassword">
          <a-input-password
            v-model:value="passwordForm.confirmPassword"
            placeholder="请再次输入新密码"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 删除账户模态框 -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="删除账户"
      ok-text="确认删除"
      ok-type="danger"
      @ok="deleteAccount"
      @cancel="deleteModalVisible = false"
    >
      <p>删除账户后，所有数据将无法恢复。确定要继续吗？</p>
      <a-input
        v-model:value="deleteConfirmText"
        placeholder="请输入 'DELETE' 确认删除"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { LockOutlined, DeleteOutlined } from '@ant-design/icons-vue'

const passwordModalVisible = ref(false)
const deleteModalVisible = ref(false)
const deleteConfirmText = ref('')

const settings = reactive({
  defaultMode: 'auto',
  defaultQuality: 'high',
  autoOptions: ['enhance'],
  notifications: ['email_complete']
})

const stats = reactive({
  monthlyFiles: 45,
  remainingQuota: '85/100',
  storageUsed: '2.5GB/5GB'
})

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码' },
    { min: 6, message: '密码长度至少6位' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码' },
    {
      validator: (rule, value) => {
        if (value !== passwordForm.newPassword) {
          return Promise.reject('两次输入的密码不一致')
        }
        return Promise.resolve()
      }
    }
  ]
}

const saveProcessingSettings = () => {
  message.success('处理设置保存成功')
}

const saveNotificationSettings = () => {
  message.success('通知设置保存成功')
}

const showChangePasswordModal = () => {
  passwordModalVisible.value = true
  // 重置表单
  Object.assign(passwordForm, {
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  })
}

const changePassword = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    message.success('密码修改成功')
    passwordModalVisible.value = false
  } catch (error) {
    message.error('密码修改失败，请重试')
  }
}

const showDeleteAccountModal = () => {
  deleteModalVisible.value = true
  deleteConfirmText.value = ''
}

const deleteAccount = () => {
  if (deleteConfirmText.value !== 'DELETE') {
    message.error('请输入正确的确认文本')
    return
  }
  
  Modal.confirm({
    title: '最终确认',
    content: '此操作不可逆，确定要删除账户吗？',
    okText: '确定删除',
    cancelText: '取消',
    okType: 'danger',
    onOk: () => {
      message.success('账户删除成功')
      deleteModalVisible.value = false
    }
  })
}
</script>

<style scoped>
.settings-page {
  max-width: 1200px;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.page-header p {
  color: #666;
  margin: 0;
}

.settings-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.account-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.data-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

.stat-value {
  font-weight: 600;
  color: #333;
}

@media (max-width: 768px) {
  .ant-col {
    margin-bottom: 16px;
  }
}
</style> 